package lablayer.view.additional;

import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.layout.Panel;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.layout.VBox;
import javafx.scene.layout.HBox;
import lablayer.view.additional.toolpanelstates.ViewToolPanel;
import javafx.scene.input.MouseEvent;
import lablayer.view.additional.toolpanelstates.ViewToolComponent;
import javafx.scene.shape.Polygon;
import javafx.scene.control.ToggleButton;
import javafx.scene.control.ToggleGroup;
import lablayer.view.additional.toolpanelstates.ViewToolLinks;

/**
 * @author darkness
 */

public class ToolPanel extends CustomNode {
    public var width: Float;
    public var height: Float;    
    var centralPanel: Panel;
    var viewToolPanel: ViewToolPanel;

    init {       
        this.viewToolPanel = ViewToolPanel {
            width: bind this.width - 120
            height: 100
        }
        this.viewToolPanel.addTool(new ViewToolComponent());
        this.viewToolPanel.addTool(new ViewToolLinks);
        this.viewToolPanel.nextTool();
    }

    override public function create(): Node {
        Panel {
            var toggleGroup: ToggleGroup = ToggleGroup {};
            width: bind this.width
            height: bind this.height
            content: [
                //background
                Rectangle {
                    layoutX: 0
                    layoutY: 0
                    width: bind this.width
                    height: bind this.height
                    fill: Color.web("#FFFFFF")
                    arcWidth: 15
                    arcHeight: 15
                    //opacity: 0.75
                },
                VBox {
                    content: [                        
                        //header
                        Panel {
                            width: bind this.width
                            height: 40
                            content: [
                                Rectangle {
                                    width: bind this.width
                                    height: 30
                                    fill: Color.TRANSPARENT
                                },
                                HBox {
                                    content: [
                                        ToggleButton {
                                            text: "Компоненты"
                                            toggleGroup: toggleGroup
                                            onMouseClicked: function(e: MouseEvent): Void {
                                                //this.viewToolPanel.
                                            }
                                        },
                                        ToggleButton {
                                            text: "Связи"
                                            toggleGroup: toggleGroup
                                            onMouseClicked: function(e: MouseEvent): Void {
                                                //this.viewToolPanel.
                                            }
                                        }
                                    ]
                                }
                            ]
                        },
                        Rectangle {
                            width: bind this.width
                            height: 5
                            fill: Color.TRANSPARENT
                        },
                        //body
                        Panel {
                            width: bind this.width
                            height: 100
                            content: [
                                HBox {
                                    content: [
                                        Rectangle {
                                            width: 5
                                            height: 5
                                            fill: Color.TRANSPARENT
                                        },
                                        //left panel
                                        Panel {
                                            var rect: Rectangle;
                                            var poly: Polygon;
                                            width: 50
                                            content: [
                                                rect = Rectangle {
                                                    width: 50
                                                    height: 100
                                                    arcHeight: 10
                                                    arcWidth: 10
                                                    fill: Color.TRANSPARENT
                                                    stroke: Color.web("#C9C9C9");
                                                    strokeWidth: 0.5

                                                    onMouseClicked: function(e: MouseEvent): Void {
                                                        this.viewToolPanel.previousTool();
                                                        toggleGroup.selectedToggle = toggleGroup.toggles[this.
                                                            viewToolPanel.getCurrentTool()];
                                                    }
                                                    onMouseEntered: function(e: MouseEvent): Void {
                                                        rect.stroke = Color.web("#696969");
                                                        poly.stroke = Color.web("#696969");
                                                    }
                                                    onMouseExited: function(e: MouseEvent): Void {
                                                        rect.stroke = Color.web("#C9C9C9");
                                                        poly.stroke = Color.web("#C9C9C9");
                                                    }
                                                },
                                                poly = Polygon {
                                                    layoutX: 15
                                                    layoutY: 40
                                                    fill: Color.TRANSPARENT
                                                    points: [
                                                        0.0, 15.0,
                                                        15.0, 30.0,
                                                        18.0, 25.0,
                                                        8.0, 15.0,
                                                        18.0, 4.0,
                                                        15.0, 0.0,
                                                    ]                                                    
                                                    stroke: Color.web("#C9C9C9")
                                                    strokeWidth: 0.5
                                                }
                                            ]
                                        },
                                        Rectangle {
                                            width: 5
                                            height: 5
                                            fill: Color.TRANSPARENT
                                        },
                                        //center panel
                                        centralPanel = Panel {
                                            content: [
                                                this.viewToolPanel
                                            ]
                                        },
                                        Rectangle {
                                            width: 5
                                            height: 5
                                            fill: Color.TRANSPARENT
                                        },
                                        //right panel
                                        Panel {
                                            var rect: Rectangle;
                                            var poly: Polygon;
                                            width: 50
                                            content: [
                                                rect = Rectangle {
                                                    width: 50
                                                    height: 100
                                                    arcHeight: 10
                                                    arcWidth: 10
                                                    fill: Color.TRANSPARENT
                                                    stroke: Color.web("#C9C9C9");
                                                    strokeWidth: 0.5

                                                    onMouseClicked: function(e: MouseEvent): Void {
                                                        this.viewToolPanel.previousTool();
                                                        toggleGroup.selectedToggle = toggleGroup.toggles[this.
                                                            viewToolPanel.getCurrentTool()];
                                                    }
                                                    onMouseEntered: function(e: MouseEvent): Void {
                                                        rect.stroke = Color.web("#696969");
                                                        poly.stroke = Color.web("#696969");
                                                    }
                                                    onMouseExited: function(e: MouseEvent): Void {
                                                        rect.stroke = Color.web("#C9C9C9");
                                                        poly.stroke = Color.web("#C9C9C9");
                                                    }
                                                },
                                                poly = Polygon {
                                                    layoutX: 15
                                                    layoutY: 40
                                                    fill: Color.TRANSPARENT
                                                    points: [
                                                        18.0, 15.0,
                                                        3.0, 30.0,
                                                        0.0, 25.0,
                                                        10.0, 15.0,
                                                        0.0, 4.0,
                                                        3.0, 0.0,
                                                    ]
                                                    stroke: Color.web("#C9C9C9")
                                                    strokeWidth: 0.5
                                                }
                                            ]
                                        },
                                        Rectangle {
                                            width: 5
                                            height: 5
                                            fill: Color.TRANSPARENT
                                        },
                                    ]
                                }
                            ]
                        },
                        Rectangle {
                            width: bind this.width
                            height: 5
                            fill: Color.TRANSPARENT
                        },
                    ]
                }

            ] //main panel content
        } // main panel
    }

}
